<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>execl导入</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/dtree.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/font/iconfont.css"/>
</head>
<style type="text/css">
    .layui-form{width:380px;height:300px; margin:15px 0 0 15px}
    .layui-upload-choose{width:264px;height:28px;border:1px solid #ddd;border-radius:4px;line-height:36px; display: inline-block;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
    .layui-inline{ position: absolute;top:0;left:0}
    .layui-form-item span.xzexcel{ display: inline-block; position: absolute; right:0; top:5px; background:#5FB878; padding:0 12px; border-radius:4px; color:#fff;}
    .prompt{color:#666;font-size:12px; border-top:1px dashed #eee; padding:10px 0;border-bottom:1px dashed #eee;}
    .prompt span{color:#ff3a3a;font-size:16px;}
    .wrong-list{width:auto;height:auto;max-height:135px;overflow-y:auto;max-width:400px; overflow-x: auto; margin-top:12px;}
    .wrong-list table thead{background-color:#f5f5f5;}
    .wrong-list table thead th{padding:7px 15px;font-size:12px;color:#333;}
    .wrong-list table tr td{ text-align:center;padding:5px 15px; font-size:12px;color:#333;}
    .wrong-list table tbody tr:nth-child(even){background: #f2f2f2; font-size:12px; color:#333;}
    .data-list{width:360px; font-size: 12px; color:#666;padding:10px 0;margin: 0 auto; text-indent:10px;}
</style>
<body>
<div class="page-content-wrap clearfix">
    <form class="layui-form" style="position:relative;">
        <span class=" layui-upload-choose" placeholder="未选择任何文件" ></span>
        <button type="button" class="layui-btn layui-btn-normal" id="selectFile" style="margin-left:4px;">选择文件</button>
        <div class="layui-form-item" id="fileShow" pane="" style="margin-top:5px; position: relative; ">
            <input type="checkbox" id="update" lay-filter="update" name="like1[write]" lay-skin="primary" title="是否更新已经存在的数据" ><span class="xzexcel" onclick="window.location.href='${download}'"><i class="iconfont">&#xe6a2;</i> 下载模板</span>
        </div>
        <div class="prompt" id="xlsShow" style=""><span>*</span>提示：仅允许导入"xls"或"xlsx"格式文件</div>
        <div class="wrong-list" id="failShow" style="display:none;">
            <div class="data-list" id="failMsg"></div>
            <table width="100%" id="failTable" cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                    <th width="80">行号</th>
                    <th>错误信息</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        <div class="layui-form-item center" style="margin-top:20px;" >
            <button class="layui-btn layui-btn-normal" type="button" id="submitBtn">提交</button>
            <button type="button" id="cancel" class="layui-btn layui-btn-primary">取消</button>
            <button type="button" style="display:none;" class="layui-btn layui-btn-normal" id="save"></button>
        </div>
    </form>
</div>
<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form', 'jquery','upload', 'layer','dialog'], function () {
        var form = layui.form,
            layer = layui.layer,
            dialog = layui.dialog,
            $ = layui.jquery,
            upload = layui.upload;

        var update="1";

        form.on('checkbox(update)', function(data){
            if (data.elem.checked) {
                update="2";
            }else{
                update="1";
            }
        });
        upload.render({
                elem: '#selectFile'
                ,url: '${url}'
                ,auto: false
                , data: {catalog: 'base/execl'}
                ,bindAction:'#submitBtn'
                ,accept:'file'
                ,exts:'xls|xlsx'
                ,before:function(obj){
                    layer.load();
                    this.data.update=update;
                }
                ,done:function(result){
                    layer.closeAll('loading');
                    if(result.code==0){
                        $("#save").click();
                    }else{
                        //dialog.msg(result.msg);
                        var msg = result.msg;
                        var str = '';
                        if (result.data != null && result.data.length > 0) {
                            for (var i = 0; i < result.data.length; i++) {
                                str += '<tr>\
                                <td>'+result.data[i].rowNum+'</td>\
                                <td title="'+result.data[i].errorMsg+'">'+result.data[i].errorMsg+'</td>\
                                </tr>';
                            }
                        }
                        $("#failMsg").html(msg);
                        $("#failTable tbody").html(str);
                        $("#failShow").show();

                        /*
                        $("#fileShow").hide();
                        $("#xlsShow").hide();
                        $("#fileShow").show();
                        $("#xlsShow").show();
                        */
                    }
                }
                ,error:function(){
                    layer.closeAll('loading');
                }
            });

    });
</script>
</body>

</html>